<template>
  <view>
    <search-page
      storageName="indexHistory"
      :params="params"
      :showHistoryBox="showHistoryBox"
      @searchSubmit="clickSearch"
      @clearInput="clearInput"
    >
      <template v-slot:searchContent="{ mainHeight }">
        <view class="tab-box">
          <you-tabs
            :activeName="tabActive"
            :tabsList="tabsList"
            @tabClick="clickTabItem"
          ></you-tabs>
        </view>
        <view class="data-num" v-if="dataList && dataList.length">
          已为您搜到以下<text class="num">{{ dataList.length }}</text>个结果
        </view>
        <view class="data-list">
          <you-scroll
            :loadingHeight="mainHeight - 48 - 46 - 20 - 5 + 'px'"
            :mainHeight="mainHeight - 48 - 46 - 5 + 'px'"
            :isAllData="isAllData"
            :isRequestSuccess="isRequestSuccess"
            @onRefresh="onRefresh"
            @loadMore="loadMore"
          >
            <view v-if="isLoading" class="common-loading">
              <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
              正在加载数据，请稍后......
            </view>
            <view class="common-no-data" v-else-if="!dataList || dataList.length === 0">
              <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
              <view class="text">暂未搜索到相关数据哦~</view>
            </view>
            <view v-else>
              <view v-if="tabActive === 1 || tabActive === 2">
                <view
                  v-for="(item, index) in dataList" 
                  :key="index"
                  @click="vipClick(item)"
                >
                  <view class="video-box">
                    <view class="left-box">
                      <!-- <video
                        :id="'videoId'+ index"
                        style="width: 100%; height: 100%"
                        class="video"
                        :src="item.videoUrl"
                        @click.stop="clickVideo(item,index)"
                      ></video> -->
                      <image
                        class="video-img"
                        :src="item.coverUrl || baseImgUrl + '/commonImg/img_common_video.jpg'"
                        mode="aspect"
                      />
                      <!-- <view class="status-box" :style="{ background: statusConfig[item.vipType].bgColor }">
                        {{ statusConfig[item.vipType].text || statusConfig['default'].text }}
                      </view>      -->
                    </view>
                    <view class="right-box">
                      <view class="name">{{ item.title }}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-else class="orthoses-list">
                <view
                  class="orthoses-item"
                  v-for="(item, index) in dataList"
                  :key="index"
                  @click="clickOrthosesItem(item)"
                >
                  <view class="img-box">
                    <image
                      class="img"
                      :src="item.deviceImg || baseImgUrl + '/userImg/img_service_small.png'"
                      mode="aspectFill"
                    />
                  </view>
                  <view class="content-box">
                    <view class="name">{{ item.deviceName }}</view>
                    <view class="btn">立即购买</view>
                  </view>
                </view>
              </view>
            </view>
          </you-scroll>
        </view>
      </template>
    </search-page>
    <!-- 会员弹框 -->
    <you-popup
      :popupVisible="popupVisible"
      @popupClose="popupVisible = false"
      :showTitle="false"
      :showBtn="false"
      bgColor="transparent"
    >
      <view slot="popupContent">
        <!-- 标题 -->
        <view class="popup-img">
        <image class="pic-img" :src="baseImgUrl + '/userImg/img_video_bg.png'" mode="aspectFit"/>
        <view class="contain-text">
          <text>VIP尊享高清课程，开通会员即可解锁全部内容！</text>
        </view>  
      </view>
        <view class="popup-btn">
          <view class="cancel-btn" @click="clickCancel">取消</view>
          <view class="activate-btn" @click="clickActivate">开通会员</view>
        </view>
      </view>
    </you-popup>
  </view>
</template>

<script>
  import api_video from '@/api/user.js'
  import SearchPage from '../components/searchPage'
  import { baseIconUrl,baseUrl,baseImgUrl } from '@/config'
  export default {
    name: 'IndexSearch',
    components: { SearchPage },
    data() {
      return {
        baseUrl,
        baseIconUrl,
        baseImgUrl,
        params: {},
        dataList: [],
        searchValue: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isAllData: false,
        isRequestSuccess: false,
        showHistoryBox: true,
        tabActive: 1,
        tabsList: [
					{ label: "课程库", name: 1 },
					{ label: "会员课程", name: 2 },
					{ label: "相关商品", name: 3 }
				],
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        videoList: [],
        popupVisible: false,
        playIndex: 0,
        statusConfig: {
          '0': { text: '免费', bgColor: '#00C6C5' },
          '1': { text: '会员专享', bgColor: 'linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%)' },
          '2': { text: 'vip定制', bgColor: 'linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%)' },
          'default': { text: '--', bgColor: '' }
        },
        isMember:''
      }
    },
    onLoad(options) {
      uni.setStorageSync('clickSearch', false)
      this.isMember = uni.getStorageSync('allUserInfo').isMember
      this.params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchType: this.tabActive,
        searchValue: options.searchValue || null
      }
      this.searchValue = options.searchValue || null
      this.getSearchList(this.params)
		},
    methods: {
      clickTabItem(value) {
        this.tabActive = value
        this.dataList = []
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          serarchType: this.tabActive,
          searchValue: this.searchValue || null
        }
        this.getSearchList(params)
      },
      clickSearch(value) {
        this.dataList = []
        this.pageNum = 1
        this.searchValue = value
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          serarchType: this.tabActive,
          searchValue: value || null
        }
        this.getSearchList(params)
      },
      getSearchList(params) {
        api_video.fetchSearchList(params).then(res => {
          const result = res.rows
          result.forEach(item =>{
            item.coverUrl = item.coverUrl ? item.coverUrl.includes('http') ? item.coverUrl : this.baseUrl + item.coverUrl : ''
            if (!item.deviceImg) return
            item.deviceImg = item.deviceImg.includes('http') ? item.deviceImg : this.baseUrl + item.deviceImg            
          })
          this.dataList.push(...res.rows)
          this.total = res.total
          this.isRequestSuccess = true
          this.isLoading = false
        })
      },
      clickOrthosesItem(item) {
        uni.navigateTo({
          url: `/subPages/userIndex/rehabilitationAids/orthosesDetail?id=${item.id}`
        })
      },
      // 课程播放
      clickVideo(item, index) {
        const videoplay = uni.createVideoContext('videoId' + index, this)
        if(this.isMember === 1 && item.vipType === "1"){
          videoplay.pause()
          this.popupVisible = true
        }
        if(item.vipType === "2"){
          videoplay.pause()
          uni.navigateTo({ 
            url: '/subPages/userIndex/memberCenter/activateMember?activeCard=2' 
          })
        }
      },
      // 课程库点击会员课程弹出弹框
      vipClick(item) {
        if(this.isMember === 1 && item.vipType === "1"){
          this.popupVisible = true
        }else if(item.vipType === "2"){
          uni.navigateTo({ 
            url: '/subPages/userIndex/memberCenter/activateMember?activeCard=2' 
          })
        }else{
          uni.navigateTo({
            url: `/subPages/userIndex/videoLibrary/videoDetail?title=${item.title}&id=${item.id}`
          })
        }
      },
      //取消
      clickCancel() {
        this.popupVisible = false
      },
      clearInput() {
        this.showHistoryBox = true
        this.dataList = []
        this.pageNum = 1
        const params = {
          pageNum: 1,
          pageSize: 10,
          serarchType: this.tabActive,
          searchValue: null
        }
        this.getSearchList(params)
        // if (this.tabActive === 1 || this.tabActive === 2) {
        //   this.getVideoList()
        // }else {
        //   this.getOrthosesList()
        // }
      },
      onRefresh() {
        this.isAllData = false
        this.isRequestSuccess = false
        this.pageNum = 1
        this.dataList = []
        this.clickSearch(this.searchValue)
      },
      loadMore() {
        if (this.dataList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.clickSearch(this.searchValue)
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .data-num {
    height: 46px;
    padding: 0 30rpx;
    line-height: 46px;
    font-size: 24rpx;
    color: #999;
    .num {
      color: #115BAA;
    }
  }
  .video-box {
    display: flex;
    padding: 24rpx 30rpx;
    // border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      // background-color: #ffbdbd;
      overflow: hidden;
      //播放按钮
      video::-webkit-media-controls-play-button {
        display: none;
      }
      .prism-big-play-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 48%;
        width: 60rpx;
        height: 60rpx;
        // background: url(var(--url) + 'icon_music_play.png') no-repeat;
        background-size: contain;
        cursor: pointer;
        .outter {
          border: 7px solid rgba(255, 255, 255, 0.51);
          border-radius: 100%;
          width: 60rpx;
          height: 60rpx;
          position: absolute;
          box-sizing: border-box;
          top: 0;
          left: 0;
        }
        .outter:hover {
          content: "";
          width: 80px;
          height: 80px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -40px;
          margin-top: -40px;
          border-radius: 50%;
          //a1为经过@keyframes 规则建立的动画名称，可本身定义web
          // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
          // a3 为css自带的动画效果，有以下几个：
          // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
          animation: warn 1s ease-out 0s infinite;
        }
        // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
        // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
        @keyframes warn {
          0% {
            // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
            transform: scale(0.5);
            opacity: 1;
          }

          30% {
            opacity: 1;
          }

          100% {
            transform: scale(1.4);
            opacity: 0;
          }
        }
      }
      .status-box {
        position: absolute;
        left: 0;
        top: 0;
        height: 40rpx;
        padding: 0 14rpx;
        border-radius: 16rpx 0 16rpx 0;
        line-height: 40rpx;
        font-size: 20rpx;
        color: #FFF;
      }
      .video-img {
        // width: 100%;
        // height: 100%;
        width: 288rpx;
        height: 192rpx;
      }
      .member-box {
        background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .popup-img{
    position: relative;
    .pic-img{
      width: 100%;
      // height: 320rpx;
    }
    .contain-text{
      position: absolute;
      width: 460rpx;
      font-size: 36rpx;
      font-weight: 600;
      color:#333;
      top: 95rpx;
      left: 70rpx;
    }
  }
  .popup-btn{
    display: flex;
    font-size: 32rpx;
    position: absolute;
    bottom: 60rpx;
    left: 50rpx;
    .cancel-btn{
      width: 240rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 8rpx;
      background: #FFF5DA;
      color: #C7AD67;
    }
    .activate-btn{
      width: 240rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 8rpx;
      background: linear-gradient(90deg, #474655 0%, #0F0E13 100%);
      color: #F5DC9A;
      margin-left: 20rpx;
    }
  }
  .orthoses-list {
    .orthoses-item {
      display: flex;
      margin: 30rpx;
      padding: 24rpx 30rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .img-box {
        width: 288rpx;
        height: 192rpx;
        margin-right: 20rpx;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .content-box {
        position: relative;
        flex: 1;
        .name {
          margin-top: 16rpx;
          line-height: 44rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #000;
        }
        .btn {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 130rpx;
          height: 48rpx;
          border-radius: 24rpx;
          text-align: center;
          line-height: 48rpx;
          font-size: 24rpx;
          color: #FFF;
          background-color: #115BAA;
        }
      }
    }
  }
</style>